<template>
	<view class="wrap">
		<view class="content">
			<view class="identity-img">
				<view class="identity-img-title">
					请上传身份证的正反面
				</view>
				<view class="identity-img-text">
					正面为国徽面 反面为头像面
				</view>
				<view class="identity-img-box">
					<view class="identity-img-left">
						<view class="identity-img-left-title">
							头像面
						</view>
						<view class="identity-img-left-text">
							上传您身份证头像面
						</view>
					</view>
					<view class="identity-img-right">
						<view class="img" v-for="(item,index) in fileList1" :key="index">
							<image :src="item" @click="imgsList1(fileList1,index)" mode="aspectFill"></image>
							<view class="delete" @click.stop="DelPic1(index)">x</view>
						</view>
						<view class="img" @click="uploadpic1" v-if="fileList1.length < 1">
							<image :src="imgUrls + 'a35.png'" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view class="identity-img-box">
					<view class="identity-img-left">
						<view class="identity-img-left-title">
							国徽面
						</view>
						<view class="identity-img-left-text">
							上传您身份证国徽面
						</view>
					</view>
					<view class="identity-img-right">
						<view class="img" v-for="(item,index) in fileList2" :key="index">
							<image :src="item" @click="imgsList2(fileList2,index)" mode="aspectFill"></image>
							<view class="delete" @click.stop="DelPic2(index)">x</view>
						</view>
						<view class="img" @click="uploadpic2" v-if="fileList2.length < 1">
							<image :src="imgUrls + 'a36.png'" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="identity-info">
				<view class="identity-info-title">
					请确认身份信息
				</view>
				<view class="identity-info-form">
					<view class="identity-info-form-left">
						姓名
					</view>
					<view class="identity-info-form-right">
						<input type="text" v-model="idCardData.name" placeholder="请输入姓名" />
					</view>
				</view>
				<view class="identity-info-form">
					<view class="identity-info-form-left">
						身份证
					</view>
					<view class="identity-info-form-right">
						<input type="idcard" v-model="idCardData.id_number" placeholder="请输入身份证" />
					</view>
				</view>
				<view class="identity-info-form">
					<view class="identity-info-form-left">
						有效期
					</view>
					<view class="identity-info-form-right">
						<input type="text" v-model="idCardData.term_time" placeholder="请输入有效期" />
					</view>
				</view>
			</view>
		</view>
		<view class="base-box">
			<view class="base-agreement">
				<view class="base-agreement-icon" @click="handelAgreement">
					<!-- <u-icon name="checkmark-circle-fill" color="#f5e189" v-if="isAgreement"></u-icon>
					<u-icon name="checkmark-circle" color="#999" v-else></u-icon> -->
					<view class="payRadioBox" :class="{'payRadioActive': isAgreement}">
						{{isAgreement ? '✓' : ''}}
					</view>
				</view>

				<view class="base-agreement-text">
					<text style="color: #999;" @click="handelAgreement">我已阅读并同意</text><text
						@click.stop="takeAgreement(4)">《用户协议》</text><text @click.stop="takeAgreement(3)">《隐私协议》</text>
				</view>
			</view>
			<view class="base-btn" @click="getIdCardAuth">
				确认信息
			</view>
		</view>
	</view>
</template>
<script>
	import {
		IdCardRecognition,
		IdCardAuth
	} from '@/api/new_api.js';

	import {
		HTTP_REQUEST_URL,
		HTTP_REQUEST_IMG_URL
	} from '@/config/app.js'

	export default {

		data() {
			return {
				isAgreement: false,
				idCardData: {
					name: '',
					id_number: '',
					term_time: '',
					face_img: '',
					back_img: '',
					authentication_data: ''
				},
				fileList1: [],
				fileList2: [],
				imgUrls: HTTP_REQUEST_IMG_URL,
			}
		},
		onLoad() {
			
		},
		onShow() {

		},
		methods: {
			// 识别身份信息
			getIdCardRecognition(_type,_url) {
				uni.showLoading({
					title:'识别中...'
				})
				IdCardRecognition({
					is_type: _type,
					imgpath: _url
				}).then((res) => {
					if(_type == 1){
						this.idCardData.face_img = _url;
						this.idCardData.name = res.data.name;
						this.idCardData.id_number = res.data.no;
						this.idCardData.authentication_data = res.data.address;
					}
					if(_type == 2){
						this.idCardData.back_img = _url;
						this.idCardData.term_time = res.data.expireDate;
					}
					uni.hideLoading();
					console.log('res', res.data, '----------------');
				}).catch((error) => {
					// that.$util.Tips({
					// 	title: error.msg
					// });
					uni.hideLoading();
					console.log('error', error, '----------------');
				})
			},
			
			getIdCardAuth() {
				let that = this;
				
				if (!that.isAgreement) return that.$util.Tips({
					title: '请阅读并同意用户隐私协议！'
				});
				IdCardAuth(that.idCardData).then((res) => {
					that.$util.Tips({
						title: res.msg
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/users/authentication/agreement'
						})
					}, 900)
					console.log('res', res.data, '----------------');
				}).catch((error) => {
					console.log('error', error, '----------------');
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				})
			},

			takeAgreement(type) {
				uni.navigateTo({
					url: `/pages/users/privacy/index?type=${ type }`
				})
			},

			handelAgreement() {
				this.isAgreement = !this.isAgreement
			},



			/**
			 * 上传文件
			 * 
			 */
			uploadpic1: function() {
				console.log('6666666666666666');
				let that = this;
				console.log('6666666666666666');
				that.$util.uploadImageOne('upload/image', (res) => {
					this.fileList1.push(res.data.url);
					that.$set(that, 'fileList1', that.fileList1);
					that.getIdCardRecognition(1,res.data.url)
				});

			},
			/**
			 * 删除图片
			 * 
			 */
			
			DelPic1: function(index) {
				let that = this;
				
				that.fileList1.splice(index, 1);
				that.idCardData.name = '';
				that.idCardData.id_number = '';
				that.idCardData.face_img = '';
				that.idCardData.term_time = '';
				that.idCardData.authentication_data = '';
				
			},
			imgsList1(urls, index){
				uni.previewImage({
					urls: urls,
					current: index
				})
			},
			/**
			 * 上传文件
			 * 
			 */
			uploadpic2: function() {
				let that = this;
				that.$util.uploadImageOne('upload/image', (res) => {
					this.fileList2.push(res.data.url);
					that.$set(that, 'fileList2', that.fileList2);
					that.getIdCardRecognition(2,res.data.url)
				});

			},
			/**
			 * 删除图片
			 * 
			 */
			DelPic2: function(index) {
				let that = this,
					pic = this.fileList2[index];
				that.fileList2.splice(index, 1);
				that.$set(that, 'fileList2', that.fileList2);
				
				that.fileList2.splice(index, 1);
				that.idCardData.back_img = '';
				that.idCardData.term_time = '';
			},
			
			imgsList2(urls, index) {
				uni.previewImage({
					urls: urls,
					current: index
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.wrap {
		width: 750rpx;
		min-height: 100vh;
		box-sizing: border-box;
		background: #fff;


		.content {
			padding: 40rpx 0 260rpx;

			.identity-img {

				.identity-img-title {
					padding: 0 48rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: rgba(48, 48, 48, 1);
				}

				.identity-img-text {
					padding: 0 48rpx;
					margin-top: 12rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(128, 72, 28, 1);
				}

				.identity-img-box {
					margin: 36rpx auto 0;
					width: 680rpx;
					height: 294rpx;
					border-radius: 20rpx;
					background: rgba(245, 246, 249, 1);
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 20rpx 0 32rpx;
					box-sizing: border-box;

					.identity-img-left {

						.identity-img-left-title {
							font-size: 40rpx;
							font-weight: 400;
							color: rgba(48, 48, 48, 1);
						}

						.identity-img-left-text {
							margin-top: 12rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(102, 102, 117, 1);
						}
					}

					.identity-img-right {
						width: 364rpx;
						height: 242rpx;
						background: rgba(233, 238, 248, 1);
						display: flex;
						align-items: center;
						justify-content: center;

						.img {
							width: 312rpx;
							height: 206rpx;
							display: inline-block;
							vertical-align: top;
							position: relative;

							image {
								width: 100%;
								height: 100%;
								display: inline-block;
								vertical-align: top;
							}

							.delete {
								position: absolute;
								right: -6rpx;
								top: -6rpx;
								width: 28rpx;
								height: 28rpx;
								border-radius: 50%;
								color: #FFF;
								text-align: center;
								font-size: 28rpx;
								font-weight: 400;
								line-height: 22rpx;
								background: red;
							}
						}
					}
				}
			}

			.identity-info {
				margin: 50rpx 60rpx 0;

				.identity-info-title {
					font-size: 32rpx;
					font-weight: bold;
					color: rgba(61, 61, 61, 1);
					padding-bottom: 10rpx;
				}

				.identity-info-form {
					padding: 24rpx 0;
					border-top: 1px solid rgba(204, 204, 204, 0.2);
					display: flex;
					align-items: center;
					justify-content: space-between;

					.identity-info-form-left {
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(61, 61, 61, 1);
					}

					.identity-info-form-right {
						text-align: right;
						width: 360rpx;
					}
				}

				.identity-info-form:nth-child(2) {
					border: none !important;
				}
			}
		}
	}

	.base-box {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
		width: 750rpx;
		background: rgba(255, 255, 255, 1);
		border-top: 1px solid rgba(240, 240, 240, 1);
		padding: 20rpx 0 50rpx;
		box-sizing: border-box;

		.base-agreement {
			padding: 0 48rpx;
			display: flex;
			align-items: center;

			.base-agreement-icon {

				.payRadioBox {
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
					text-align: center;
					border: 3rpx solid #ccc;
				}

				.payRadioActive {
					font-size: 22rpx;
					font-weight: 700;
					color: #000;
					background: #E8CBA1;
				}
			}

			.base-agreement-text {
				margin-left: 12rpx;
				color: #999;
				font-size: 24rpx;

				text {
					color: #d43030;
				}
			}
		}

		.base-btn {
			margin: 24rpx auto 0;
			width: 696rpx;
			height: 98rpx;
			border-radius: 12rpx;
			background: linear-gradient(223.69deg, rgba(255, 250, 207, 1) 0%, rgba(244, 222, 129, 1) 100%);
			font-size: 32rpx;
			font-weight: 500;
			line-height: 98rpx;
			color: rgba(128, 72, 28, 1);
			text-align: center;
		}

	}
</style>